<template>
	<view>
		<view class="head">
			<view class="canvas-box">
				<r-canvas ref="rCanvas"></r-canvas>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="save">保存到本地</view>
			<!-- <view class="btn" @click="upload">上传卡图</view> -->
			<view class="btn" @click="toHome">返回首页</view>
		</view>
	</view>
</template>

<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			rCanvas
		},
		data() {
			return {
				tempFilePath: null,
				info: null,
			}
		},
		computed: {
			...mapGetters(['sgsInfo']),
		},
		watch: {},
		methods: {
			setData() {
				let obj = {}
				let info = uni.getStorageSync('sgsInfo')
				obj.img = info.cardImg
				obj.hp = info.hp
				obj.name = info.name
				obj.title = info.title
				obj.jineng = info.jineng
				console.log(info)
				if (info.country == "魏") {
					obj.bian = "../../static/images/img/diy/sgs/bian-1.png"
					obj.ji = "../../static/images/img/diy/sgs/ji-1.png"
					obj.ti = "../../static/images/img/diy/sgs/ti-1.png"
				} else if (info.country == "蜀") {
					obj.bian = "../../static/images/img/diy/sgs/bian-2.png"
					obj.ji = "../../static/images/img/diy/sgs/ji-2.png"
					obj.ti = "../../static/images/img/diy/sgs/ti-2.png"
				} else if (info.country == "吴") {
					obj.bian = "../../static/images/img/diy/sgs/bian-3.png"
					obj.ji = "../../static/images/img/diy/sgs/ji-3.png"
					obj.ti = "../../static/images/img/diy/sgs/ti-3.png"
				} else if (info.country == "群") {
					obj.bian = "../../static/images/img/diy/sgs/bian-4.png"
					obj.ji = "../../static/images/img/diy/sgs/ji-4.png"
					obj.ti = "../../static/images/img/diy/sgs/ti-4.png"
				} else if (info.country == "神") {
					obj.bian = "../../static/images/img/diy/sgs/bian-5.png"
					obj.ji = "../../static/images/img/diy/sgs/ji-5.png"
					obj.ti = "../../static/images/img/diy/sgs/ti-5.png"
				}
				console.log(obj)

				this.info = obj
			},
			save() {
				// 保存图片
				if (this.tempFilePath) {
					this.$refs.rCanvas.saveImage(this.tempFilePath)
				}
			},
			upload() {
				let isLogin = uni.getStorageSync('isLogin')
				if (!isLogin) {
					uni.showToast({
						icon: 'none',
						title: '未登录'
					})
					return
				}
				let str = 'sgs' + new Date().getTime() + '.png'
				wx.cloud.uploadFile({
					cloudPath: 'diy/sgs/' + str,
					filePath: this.tempFilePath, // 文件路径
				}).then(res => {
					
					// console.log(res.fileID)
					// 图片路径存入图片表中
					wx.cloud.callFunction({
						name: 'upImg',
						data: {
							imgUrl: res.fileID,
							type: 1 //type=1为三国杀图片
						}
					}).then(res => {
						console.log(res)
						wx.showToast({
							title: '成功',
						})
					})
				}).catch(error => {
					wx.showToast({
						title: error,
						icon: 'none'
					})
				})
			},
			toHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		},
		onLoad(options) {
			// console.log(this.sgsInfo)
			this.setData()
		},
		onShow() {},
		onReady() {
			uni.showLoading({
				title: '绘制中！'
			});
			this.$nextTick(async () => {

				// 初始化
				await this.$refs.rCanvas.init({
					canvas_id: "rCanvas",
					canvas_width: 345,
					canvas_height: 483,
				})

				// 画背景图
				await this.$refs.rCanvas.drawImage({
					url: this.info.img,
					x: 0,
					y: 0,
					w: 345,
					h: 483,
				}).catch(err_msg => {
					uni.showToast({
						title: err_msg,
						icon: "none"
					})
				})
				// 画边框
				await this.$refs.rCanvas.drawImage({
					url: this.info.bian,
					x: 0,
					y: 0,
					w: 345,
					h: 483,
				}).catch(err_msg => {
					uni.showToast({
						title: err_msg,
						icon: "none"
					})
				})
				// 画体力
				for (let i = 1; i <= this.info.hp; i++) {
					// console.log(i)
					await this.$refs.rCanvas.drawImage({
						url: this.info.ti,
						x: 84 + (i - 1) * 16,
						y: 20,
						w: 20,
						h: 20,
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
				}
				// 画技能
				for (let i = 1; i <= this.info.jineng.length; i++) {

					await this.$refs.rCanvas.drawImage({
						url: this.info.ji,
						x: 30,
						y: 370 + (i - 1) * 36,
						w: 60,
						h: 24,
					})

					if (this.info.jineng[i - 1].title) {
						await this.$refs.rCanvas.drawText({
							text: this.info.jineng[i - 1].title,
							max_width: 0,
							x: 44,
							y: 386 + (i - 1) * 36,
							font_color: "#191A0A",
							font_size: 14,
							font_family: "cursive",
						})
					}

					if (this.info.jineng[i - 1].text) {
						await this.$refs.rCanvas.drawText({
							text: this.info.jineng[i - 1].text,
							max_width: 200,
							x: 92,
							y: 382 + (i - 1) * 36,
							font_color: "#191A0A",
							font_size: 10,
							font_family: "cursive",
						})
					}
				}

				// 画名字
				await this.$refs.rCanvas.drawTextv({
					text: this.info.name,
					max_width: 0,
					x: 46,
					y: 240,
					font_color: "#fff",
					font_size: 30,
					font_family: "cursive",
					space: 36,
				}).catch(err_msg => {
					uni.showToast({
						title: err_msg,
						icon: "none"
					})
				})

				// 画称号
				await this.$refs.rCanvas.drawTextv({
					text: this.info.title,
					max_width: 0,
					x: 50,
					y: 100,
					font_color: "#FEF8B5",
					font_size: 20,
					font_family: "cursive",
					space: 26,
				}).catch(err_msg => {
					uni.showToast({
						title: err_msg,
						icon: "none"
					})
				})

				// 生成海报
				await this.$refs.rCanvas.draw((res) => {
					//res.tempFilePath：生成成功，返回base64图片
					this.tempFilePath = res.tempFilePath
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: "绘制成功"
					})
					console.log(res.tempFilePath)
				})
			})
		},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	.head {
		.canvas-box {
			width: 690rpx;
			height: 966rpx;
			margin: 30rpx auto;
			// font-family: cursive;
		}

	}

	.btn-box {
		width: 750rpx;
		margin-top: 60rpx;
	}

	.btn {
		margin: 0 auto;
		margin-bottom: 30rpx;
		width: 300rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background: linear-gradient(#00AEEC, #1296db);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
</style>
